/**
 * Created by LiH on 2018/5/17.
 */
import ZCGuideMask from '../components/ZuicoolGuideMask'

let $vm;

export default {
  install(Vue){
    const GuideMask = Vue.extend(ZCGuideMask);

    if(!$vm){
      $vm = new GuideMask({
        el: document.createElement('div')
      });
      document.body.appendChild($vm.$el)
    }

    Vue.$ZCGuideMask = {
      show(frames, el){
        if (frames instanceof Array) {
          if(!frames.length){
            throw new Error('ZCGuideMask: frames can not be empty')
          } else if (frames.some(frame => !frame.window)) {
            throw new Error('ZCGuideMask: every frame should have window prop')
          } else {
            $vm.step = 0;
            $vm.frames = frames
          }
        } else {
          throw new TypeError('ZCGuideMask: frames must be an array')
        }

        // 移动$el会导致取不到$ZCGuideMask
        if(el && (el instanceof HTMLElement || el.nodeType === 1)){
          console.log(`el:${el}`);
          el.appendChild($vm.$el)
        }

        $vm.visible = true
      },

      hide(){
        $vm.$el.style.position = 'fixed';
        document.body.appendChild($vm.$el);
        $vm.visible = false;
        return $vm.$el
      }
    };

    Vue.mixin({
      created() {
        this.$ZCGuideMask = Vue.$ZCGuideMask
      }
    })
  }
}
